<template>
  <div class="search" :class="{ showclass: show }">
    <svg-icon
      id="guide-search"
      icon="search"
      class-name="search-icon"
      @click.stop="isShow"
    ></svg-icon>
    <el-select
      v-model="valueSelect"
      filterable
      remote
      reserve-keyword
      placeholder="Please enter a keyword"
      :remote-method="remoteMethod"
      :loading="loading"
      class="elSelectBox"
    >
      <el-option
        v-for="option in options"
        :key="option.item.path"
        :label="option.item.title.join(' > ')"
        :value="option.item.path"
      />
      <template #loading>
        <el-icon class="is-loading">
          <svg class="circular" viewBox="0 0 20 20">
            <g
              class="path2 loading-path"
              stroke-width="0"
              style="animation: none; stroke: none"
            >
              <circle r="3.375" class="dot1" rx="0" ry="0" />
              <circle r="3.375" class="dot2" rx="0" ry="0" />
              <circle r="3.375" class="dot4" rx="0" ry="0" />
              <circle r="3.375" class="dot3" rx="0" ry="0" />
            </g>
          </svg>
        </el-icon>
      </template>
    </el-select>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { filterRouters, generateMenus } from '@/utils/route'
import { useRouter } from 'vue-router'
import { generateRoutes } from './FuseData.js'
import Fuse from 'fuse.js'
import { useStore } from 'vuex'

const options = ref([])
const valueSelect = ref('')
const loading = ref(false)

const show = ref(false)
const isShow = () => {
  show.value = !show.value
}

const remoteMethod = (query) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      options.value = fuse.search(query)
      // options.value = list.value.filter((item) => {
      //   return item.label.toLowerCase().includes(query.toLowerCase())
      // })
    }, 1000)
  } else {
    options.value = []
  }
}

// 点击body时关闭搜索框
const closeSearchBox = () => {
  show.value = false
}
watch(show, (val) => {
  if (val) {
    document.body.addEventListener('click', closeSearchBox)
  } else {
    document.body.removeEventListener('click', closeSearchBox)
  }
})

// 检索数据源
const router = useRouter()
let fuse
const searchPool = computed(() => {
  const filterRoutes = filterRouters(router.getRoutes())
  console.log(generateMenus(filterRoutes))
  return generateMenus(filterRoutes)
})
const initNewRouter = () => {
  const newRoutes = generateRoutes(searchPool.value)
  console.log('newRoutes111', newRoutes)
  fuse = new Fuse(newRoutes, {
    // 是否按优先级进行排序
    shouldSort: true,
    // 匹配长度超过这个值的才会被认为是匹配的
    minMatchCharLength: 1,
    // 将被搜索的键列表。 这支持嵌套路径、加权搜索、在字符串和对象数组中搜索。
    // name：搜索的键
    // weight：对应的权重
    keys: [
      {
        name: 'title',
        weight: 0.7
      },
      {
        name: 'path',
        weight: 0.3
      }
    ]
  })
}
initNewRouter()

/**
 * 搜索框列表国际化处理
 */
const store = useStore()
watch(
  () => store.getters.language,
  () => {
    initNewRouter()
  }
)
/**
 * 点击之后监听value的值并进行跳转
 */
watch(valueSelect, (newValue) => {
  if (newValue) {
    router.push(newValue)
    valueSelect.value = ''
    isShow()
  }
})
</script>

<style lang="scss" scoped>
.search {
  .search-icon {
    cursor: pointer;
    font-size: 18px;
    margin-right: 18px;
  }
  .elSelectBox {
    width: 0;
    overflow: hidden;
    transition: all 0.5s;
  }
  &.showclass {
    .elSelectBox {
      width: 240px;
    }
  }
}

.el-select-dropdown__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 20px;
}

.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}
.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}
.loading-path .dot1 {
  transform: translate(3.75px, 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
}
.loading-path .dot2 {
  transform: translate(calc(100% - 3.75px), 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.4s;
}
.loading-path .dot3 {
  transform: translate(3.75px, calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 1.2s;
}
.loading-path .dot4 {
  transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.8s;
}
@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}
@keyframes custom-spin-move {
  to {
    opacity: 1;
  }
}
</style>
